<!-- 自定义配置 -->
<template>
    <div>
        <el-collapse accordion>
            <el-collapse-item title="布局设置">
                <el-form-item label="布局行数">
                    <avue-input-number v-model="main.activeOption.grid.rowNum">
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="布局列数">
                    <avue-input-number
                        v-model="main.activeOption.grid.columnNum"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="最小行高度">
                    <avue-input-number
                        v-model="main.activeOption.grid.minRowHeight"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="最大行高度">
                    <avue-input-number
                        v-model="main.activeOption.grid.maxRowHeight"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="最小列宽度">
                    <avue-input-number
                        v-model="main.activeOption.grid.minColumnWidth"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="最大列宽度">
                    <avue-input-number
                        v-model="main.activeOption.grid.maxColumnWidth"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="布局间距">
                    <avue-input-number v-model="main.activeOption.grid.gap">
                    </avue-input-number>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="工序标题设置">
                <el-form-item label="高度">
                    <avue-input-number
                        v-model="main.activeOption.routeNameTitle.height"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体间距">
                    <avue-input-number
                        v-model="main.activeOption.routeNameTitle.split"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体类型">
                    <avue-select
                        filterable
                        allow-create
                        v-model="main.activeOption.routeNameTitle.fontFamily"
                        :dic="dicOption.fontFamily"
                    ></avue-select>
                </el-form-item>
                <el-form-item label="字体大小">
                    <avue-input-number
                        v-model="main.activeOption.routeNameTitle.fontSize"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体颜色">
                    <avue-input-color
                        v-model="main.activeOption.routeNameTitle.color"
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="字体行高">
                    <avue-input-number
                        v-model="main.activeOption.routeNameTitle.lineHeight"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item label="字体背景">
                    <avue-input-color
                        v-model="
                            main.activeOption.routeNameTitle.backgroundColor
                        "
                    ></avue-input-color>
                </el-form-item>
                <el-form-item label="文字粗细">
                    <avue-select
                        v-model="main.activeOption.routeNameTitle.fontWeight"
                        :dic="dicOption.fontWeight"
                    >
                    </avue-select>
                </el-form-item>
                <el-form-item label="对齐方式">
                    <avue-select
                        v-model="main.activeOption.routeNameTitle.textAlign"
                        :dic="dicOption.textAlign"
                    >
                    </avue-select>
                </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="饼图设置">
                <el-form-item label="设置为环形">
                    <avue-switch
                        v-model="main.activeOption.pieChart.isAnnular"
                        :disabled="disabled"
                    ></avue-switch>
                </el-form-item>
                <el-form-item
                    label="饼图半径"
                    v-if="!main.activeOption.pieChart.isAnnular"
                >
                    <avue-input-number
                        v-model="main.activeOption.pieChart.radius"
                        :disabled="disabled"
                    ></avue-input-number>
                </el-form-item>

                <el-form-item
                    label="饼图内圆半径"
                    v-if="main.activeOption.pieChart.isAnnular"
                >
                    <avue-input-number
                        v-model="main.activeOption.pieChart.innnerRadius"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-form-item
                    label="饼图外圆半径"
                    v-if="main.activeOption.pieChart.isAnnular"
                >
                    <avue-input-number
                        v-model="main.activeOption.pieChart.outRadius"
                        :max="200"
                    ></avue-input-number>
                </el-form-item>
                <el-collapse accordion>
                    <el-collapse-item title="标题">
                        <el-form-item label="标题">
                            <avue-input
                                v-model="main.activeOption.title.content"
                                :disabled="disabled"
                            ></avue-input>
                        </el-form-item>
                        <el-form-item label="标题颜色">
                            <avue-input-color
                                v-model="main.activeOption.title.color"
                                :disabled="disabled"
                            ></avue-input-color>
                        </el-form-item>
                        <el-form-item label="标题大小">
                            <avue-input-number
                                v-model="main.activeOption.title.fontSize"
                                :disabled="disabled"
                            ></avue-input-number>
                        </el-form-item>
                        <el-form-item label="副标题">
                            <avue-input
                                v-model="main.activeOption.title.subContent"
                                :disabled="disabled"
                            ></avue-input>
                        </el-form-item>
                        <el-form-item label="副标题颜色">
                            <avue-input-color
                                v-model="main.activeOption.title.subColor"
                                :disabled="disabled"
                            ></avue-input-color>
                        </el-form-item>
                        <el-form-item label="副标题大小">
                            <avue-input-number
                                v-model="main.activeOption.title.subFontSize"
                                :disabled="disabled"
                            >
                            </avue-input-number>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
                <el-collapse accordion>
                    <el-collapse-item title="图例">
                        <el-form-item label="显示">
                            <avue-switch
                                v-model="main.activeOption.pieChart.legend.show"
                                :disabled="disabled"
                            ></avue-switch>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>

                <el-collapse accordion>
                    <el-collapse-item title="数值">
                        <el-form-item label="显示">
                            <avue-switch
                                v-model="main.activeOption.pieChart.label.show"
                                :disabled="disabled"
                            ></avue-switch>
                        </el-form-item>
                        <el-form-item label="纯数字">
                            <avue-switch
                                v-model="
                                    main.activeOption.pieChart.label.pureNumber
                                "
                                :disabled="disabled"
                            ></avue-switch>
                        </el-form-item>
                        <el-form-item label="大小">
                            <avue-input-number
                                v-model="
                                    main.activeOption.pieChart.label.fontSize
                                "
                                :max="200"
                            ></avue-input-number>
                        </el-form-item>
                        <el-form-item label="颜色">
                            <avue-input-color
                                v-model="main.activeOption.pieChart.label.color"
                            ></avue-input-color>
                        </el-form-item>
                    </el-collapse-item>
                </el-collapse>
            </el-collapse-item>
            <el-collapse-item title="滚动设置">
                <el-form-item label="切换时间">
                    <avue-input-number
                        v-model="main.activeOption.interval"
                        :min="0"
                    >
                    </avue-input-number>
                </el-form-item>
                <el-form-item label="切换箭头">
                    <avue-switch
                        v-model="main.activeOption.arrow"
                    ></avue-switch>
                </el-form-item>
                <el-form-item label="指示器">
                    <avue-switch
                        v-model="main.activeOption.indicatorPosition"
                    ></avue-switch>
                </el-form-item>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import { dicOption } from "@/option/config";
export default {
    name: "productcarouselRoute",
    inject: ["main", "contain"],
    components: {},
    data() {
        return {
            dicOption: dicOption
        };
    },
    methods: {}
};
</script>

<style lang="scss" scoped>
.borderImg {
    height: 100px;
    object-fit: contain;
}
</style>
